<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      title="基础设置（对象字段）"
      width="700px"
      v-bind="$attrs"
      @open="onOpen"
      @close="onClose"
    >
      <el-form
        ref="elForm"
        :model="formData"
        size="small"
        label-width="100px"
      >
        <el-form-item label-width="0" prop="notEmpty" style="text-align: center">
          <el-radio-group v-model="formData.notEmpty" size="medium">
            <el-radio
              v-for="(item, index) in notEmptyOptions"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onClose">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { reactive, getCurrentInstance, toRefs } from 'vue'

export default {
  name: 'ObjectDialog',
  inheritAttrs: false,
  props: {
    initData: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, { emit }) {
    const state = reactive({
      dialogVisible: false,
      formData: {
        notEmpty: false,
      },
      notEmptyOptions: [
        {
          label: '可为空',
          value: false,
        },
        {
          label: '不允许为空',
          value: true,
        },
      ],
    });

    const onOpen = () => {
      state.formData = { 
        ...state.formData,
        notEmpty: props.initData.notEmpty,
      };
      state.dialogVisible = true;
    }
    const { proxy } = getCurrentInstance();
    const onClose = () => {
      proxy.$refs.elForm.resetFields();
      state.dialogVisible = false;
    }
    const handleConfirm = () => {
      proxy.$refs.elForm.validate((valid) => {
        if (!valid) return;
        const newData = state.formData;
        proxy.mittBus.emit(`schema-update-${props.initData.editorId}`, {
          eventType: 'save-setting',
          // 之前的参数
          ...props.initData,
          // 设置数据
          newData,
        })
        onClose();
      })
    }

    return {
      ...toRefs(state),
      onOpen,
      onClose,
      handleConfirm,
    }
  },
}
</script>
